import React, { useState } from 'react';
import { isAssetTypeAnImage } from '@/utils/utils';
import { FilePdfOutlined } from '@ant-design/icons';
import styles from './index.less';
import FileOpen from '../FileIframOpen';

interface renderFileProps {
  style?: any;
  title?: string;
  fielUrl: string;
}

const RenderMoreFile: React.FC<renderFileProps> = (props) => {
  const { title, style, fielUrl } = props;
  const [showFile, setShowFile] = useState<boolean>(false);
  const [fileUrl, setFileUrl] = useState<string>('');

  const urlList = fielUrl ? fielUrl.split(',') : [];
  
  return (
    <span style={{ width: '100%' }}>
      {urlList.length > 0 ? (
        <div style={style} className={styles.fileDiv}>
          {isAssetTypeAnImage(urlList[0]) ? (
            <a
              className={styles.imgBox}
              onClick={() => {
                // setFileUrl(urlList[0]);
                setShowFile(true);
              }}
              rel="noreferrer"
            >
              <img src={urlList[0]} />
            </a>
          ) : (
            <a
              className={styles.fileBox}
              onClick={() => {
                // setFileUrl(urlList[0]);
                setShowFile(true);
              }}
              rel="noreferrer"
            >
              <a className={styles.icon}>
                <FilePdfOutlined />
              </a>
              <a
                onClick={() => {
                  // setFileUrl(urlList[0]);
                  setShowFile(true);
                }}
                rel="noreferrer"
              >
                {urlList[0] ? '查看文件' : '-'}
              </a>
            </a>
          )}
          {urlList.length > 1 && (
            <div
              className={styles.more}
              onClick={() => {
                setShowFile(true);
              }}
            >
              <div>共</div>
              <div>{urlList.length}</div>
              <div>个</div>
            </div>
          )}
        </div>
      ) : '-'}
      {showFile && (
        <FileOpen
          title={title}
          fielUrl={fielUrl}
          modalVisible={showFile}
          onCancel={() => {
            setShowFile(false);
            setFileUrl('');
          }}
        />
      )}
    </span>
  );
};

export default RenderMoreFile;
